<template>
    <div>
        <!-- 一个开关，用于切换空间布局的填充模式 -->
        <div style="margin-bottom: 15px">
            切换: <el-switch v-model="fill"></el-switch>
            <!-- v-model 双向绑定 fill，使开关的开合直接改变 fill 值 -->
        </div>

        <!-- el-space 是 Element Plus 提供的空间布局组件
             :fill="fill" —— 决定空间内项目是否自动拉伸填满剩余空间
             wrap —— 允许内部元素自动换行 -->
        <el-space :fill="fill" wrap>

            <!-- el-card 卡片组件
                 v-for="i in 3" —— 循环生成 3 个卡片
                 :key="i" —— 避免重复渲染，提高性能 -->
            <el-card class="box-card" v-for="i in 3" :key="i">

                <!-- 插槽 slot="header"
                     用 template #header 来替换卡片头部内容 -->
                <template #header>
                    <div class="card-header">
                        <span>卡片标题</span>
                    </div>
                </template>

                <!-- 卡片内部的列表内容
                     再生成 3 条内容 -->
                <div v-for="o in 3" :key="o" class="text item">
                    {{ '列表内容' + o }}
                </div>
            </el-card>

        </el-space>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fill: true   // 控制 el-space 是否填充剩余空间
        }
    }
}
</script>
